<template>
  <div>
    <p :style="{ color: colorString }"
      >vue3--Demo(使用setup函数)--组件provide&inject--GrandSon组件</p
    >
    <p
      >GrandSon组件--数据信息：dataFlag:{{ dataFlag }} color:{{ colorString }} fixModelData:{{
        fixModelData
      }}
      timeFlagData:{{ timeFlagData }}</p
    >
    <a-space size="middle">
      <a-button type="primary" @click="injectMethod">点击调用根组件的弹出提示信息</a-button>
      <a-button type="primary" @click="modifyInjectData"
        >点击在GrandSon组件中修改注入的数据</a-button
      >
    </a-space>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, inject } from 'vue';
  import { DataModel, TimeAndFlagDataModel } from './data';

  export default defineComponent({
    setup() {
      console.log(
        'vue3--Demo(使用setup函数)--组件provide&inject--GrandSon组件--setup 函数 执行了。',
      );

      //注入接收上级传入的数据并在return中导出
      const colorString = inject('color');
      const dataFlag = inject('dataFlag', true); //指定默认值为true，不指定默认值时如果父组件中未传入会有警告
      const fixModelData = inject<DataModel>('data1');
      const timeFlagData = inject<TimeAndFlagDataModel>('data2');
      const injectMethod = inject('testProvideMethod');

      //测试在子孙组件中修改注入的数据，所有的子孙和父组件数据均修改；如想要不修改，需要在提供时指定readonly
      function modifyInjectData() {
        timeFlagData.time = new Date();
      }

      return {
        colorString,
        dataFlag,
        fixModelData,
        timeFlagData,
        injectMethod,
        modifyInjectData,
      };
    },
  });
</script>
<style scoped></style>
